<template>
  <div> <!-- 这是消息的：点击进入 -->
    <van-tabs :active="active" scrollspy sticky>
  <van-tab v-for="(item,index) in userStore.$state.items" :key="index" :title="item.text" >
    <div class="biao">{{ item.text }}</div>
      <van-grid :border="false" :column-num="2">
  <van-grid-item  v-for="(i, v) in item.children" :key="v">
    <van-image @click="tup(i)"
      :src="i.img"
    />
  </van-grid-item>
</van-grid>
  </van-tab>
</van-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import {useCounterStore} from '../xiaopage/stores/counter'
 const userStore = useCounterStore();
 console.log(userStore.$state.items);
 const active = ref(0);
 const router = useRouter()
//  跳转到视频播放页面
const tup =(i)=>{
  console.log(i,"dfcgvhjkl");
      router.push({path:"/xiao/shipin",query:i})
    }
   
</script>

<style lang="scss">
.biao{
  width: 3.5rem;
  height: .8rem;
  font-size: .45rem;
  margin-left: 2rem;
  text-align: center;
  line-height: 0.8rem;
  color: white;
  border-radius: .5rem;
  margin-top: .2rem;
  margin-bottom: 0.1rem;
  background: linear-gradient(to left, rgb(81, 138, 202) 28px, rgb(66, 9, 238) 77%, rgb(115, 13, 178));
}
.hezi{
  width: 100%;
  height: 4rem;
  background-color:red;
}
</style>